<script lang="ts" setup>
import {getMenuOut} from "~/server/system.service";

const reactiveData = reactive({
    navList: '' as any,
})
let {navList} = toRefs(reactiveData)

function getNavInfo(): void {
    getMenuOut().then(({data}: any) => {
        reactiveData.navList = data.data
    })
}
onMounted(() => {
    getNavInfo()
})
</script>

<template>
    <nav class="menu-out dialog-area">
        <ul id="menu-primary" class="menu">
            <template v-for='item in navList' :key='item.id'>
                <li class="menu-item">
                    <a :title="item.attribute" rel="button">{{ item.name }}</a>
                    <SubMenu :child="item.parent"/>
                </li>
            </template>
        </ul>
    </nav>
</template>
